import React, { isValidElement, FC, ReactElement, ReactNode } from 'react';
import { Drawer, DrawerProps } from 'antd';
import { widthEnum } from '@C/base/SDrawer/constant';
import { footerElement } from '@C/base/SDrawer/footerBtnComponent';
// import utils, { getLog } from '@/utils';
import './index.less';

type IProps = {
  width: 'small' | 'middle' | 'large' | number;
  onSubmit: () => void;
  onCancel: () => void;
  onClose: () => void;
  children: ReactNode;
  Children: ReactElement;
}

/** SDrawer 组件说明
* @author: JasonStandFor
* @description Desc:: 'props' 参数说明:  分为 other (antd自带参数)和 SDrawer 包装后的参数, 如 width、title、footer、onSubmit、onCancel、Children 等
* @open {boolean} true|false
* @width {string|number} 'small'|'middle'|'large' || anyNumber
* @title {string|ReactNode|HtmlElement}
* @footer: {object|boolean|string|ReactNode|HtmlElement} object: { block: boolean; align: string; btnInterval: number; btnWidth: number }、string: 'confirm'|'submit'、boolean: true|false
* @onSubmit: {Function} 抽屉 确认|提交 事件
* @onClose: {Function} 抽屉 取消|返回 事件
* @Children: {ReactNode|HtmlElement}
* @param { antd.DrawerProps } props
* @return SDrawer
* @example:
单标签写法:
<SDrawer
  open={true|false}
  width="small"        // 可选参数: 默认自动计算宽度，可选('small'|'middle'|'large')、或者传入大于0的数字
  title="SDrawer"      // 可选参数: 默认使用 h3 标题, 一般传入 string 类型、支持 ReactNode 节点传入方式
  footer               // 可选类型: object、string、boolean。 string<'confirm'|'submit'>、boolean<true|false>
  // object<block: boolean(为true时, 其它参数会失效); align: string('left'|'right'|'center'); btnInterval: number; btnWidth: number>、默认是 string 类型的 'confirm'
  onSubmit={Function}  // 可选参数: 抽屉 确认|提交 事件, 默认调用 getLog 方法输出日志
  onClose={Function}   // 可选参数: 抽屉 取消|返回 事件, 默认调用 onClose 方法, 不传控制台会输出异常信息
  Children={<Demo />}  // 可选参数: 仅限单标签使用, 使用该参数, 双标签的 children 会失效, 接收 class组件 和 函数式组件 或 HtmlElement 节点
/>
双标签写法:
<SDrawer
  open={true|false}
  width="small"
  title="SDrawer"
  footer="submit"
  onSubmit={Function}
  onClose={Function}
>
 <Demo />
<SDrawer/>
* */
const Index: FC<Partial<IProps> & Omit<Partial<DrawerProps>, 'width'>> = (props): ReactElement => {
  // console.log('props: ', props);
  const { width = NaN, title, footer, onSubmit, onCancel, children, Children, ...other } = props;
  // console.log('other: ', other);
  const { onClose, open } = other || {};

  const baseVariable: Partial<DrawerProps> = {
    title: (isValidElement(title) && title) || <h3 className="base-component-super-drawer-title">{ title || '标题' }</h3>,
    width: +width || widthEnum[width] || 'calc(100vw - (220px + 15px))',
    footer: (isValidElement(footer) && footer) || footerElement(footer, onSubmit, () => {
      try {
        onCancel && onCancel();
        onClose && onClose();
      } catch (e) {
        console.error(e);
      }
    }),
    headerStyle: {
      overflow: !open ? 'hidden' : '',
    },
    bodyStyle: {
      overflow: 'hidden',
      paddingRight: 8,
    },
  };

  return (
    <Drawer
      { ...baseVariable }
      { ...other }
    >
      { (isValidElement(Children) && Children) || children }
    </Drawer>
  );
};

export default Index;
